<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>角色管理</title>

    <!--[if IE 7]>
    <link rel="stylesheet" href="../../css/font-awesome-ie7.min.css"/>
    <![endif]-->

    <link rel="stylesheet" href="../../css/jquery-ui-1.10.3.full.min.css"/>
    <link rel="stylesheet" href="../../css/datepicker.css"/>
    <link rel="stylesheet" href="../../css/ui.jqgrid.css"/>

    <link rel="stylesheet" href="../../css/ace.min.css"/>
    <link rel="stylesheet" href="../../css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="../../css/ace-skins.min.css"/>
    <link rel="stylesheet" href="../../css/plugins/iCheck/all.css">
    <link rel="stylesheet" href="../../css/plugins/jsTree/style.min.css">

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="../../css/ace-ie.min.css"/>
    <![endif]-->

    <script src="../../js/date-time/bootstrap-datepicker.min.js"></script>

    <%-- icheck --%>
    <script src="../../js/plugins/iCheck/icheck.js"></script>
    <script src="../../js/plugins/iCheck/myiCheck.js"></script>
    <%-- 分页插件 --%>
    <script type="text/javascript" src="../../js/plugins/jqPaginator/jqPaginator.js"></script>
    <%-- ajax form ajax submit --%>
    <script type="text/javascript" src="../../js/plugins/form/jquery.form.js"></script>
    <%-- jstree --%>
    <script type="text/javascript" src="../../js/plugins/jsTree/jstree.min.js"></script>

    <script type="text/javascript" src="../../modules/auth/resource.js"></script>


</head>
<body>

<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i><a href="#">后台系统权限</a>
            </li>
            <li class="active">资源管理</li>
        </ul>
        <!-- .breadcrumb -->

        <div class="nav-search" id="nav-search">
            <form class="form-search">
				<span class="input-icon">
					<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                           autocomplete="off"/>
					<i class="icon-search nav-search-icon"></i>
				</span>
            </form>
        </div>
        <!-- #nav-search -->
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-xs-4">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        资源树
                    </div>
                    <div class="panel-body">
                        <div id="resourceTree"></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-8">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        资源列表
                        <div class="pull-right" style="margin-right: 20px;margin-top: -7px;">
                            <shiro:hasPermission name="resource:add">
                                <button class="btn btn-success btn-sm" type="button" data-toggle="modal"
                                        data-target="#addResource">
                                    <span class="icon-zoom-in bigger-130"></span><strong>新增记录</strong>
                                </button>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="resource:delete">
                                <button class="btn btn-danger btn-sm ml10" type="button" onclick="deleteData()">
                                    <span class="icon-trash bigger-130"></span><strong>批量删除</strong>
                                </button>
                            </shiro:hasPermission>
                        </div>
                    </div>
                    <div class="panel-body">
                        <input type="text" class="form-control" name="id" value="0" id="page_parentId"
                               style="display: none;">
                        <table id="pageInfoData" class="table table-hover table-bordered table-striped">
                            <thead>
                            <tr>
                                <th width="58"><input type="checkbox" id="chkAll" name="chkAll"></th>
                                <th>ID</th>
                                <th>资源名称</th>
                                <th>资源类型</th>
                                <th>资源地址</th>
                                <th>资源权限</th>
                                <th>序号</th>
                                <th>图片</th>
                                <th width="150">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pageInfo.list}" var="data">
                                <tr>
                                    <td class="t_c"><input type="checkbox" name="chkList"></td>
                                    <td class="t_c">${data.id}</td>
                                    <td class="t_c">${data.text}</td>
                                    <td class="t_c">${data.menuType}</td>
                                    <td class="t_c">${data.url}</td>
                                    <td class="t_c">${data.permission}</td>
                                    <td class="t_c">${data.sort}</td>
                                    <td class="t_c">${data.icon}</td>
                                    <td class="t_c">
                                        <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                                            <a class="green" href="#" data-toggle="modal" data-target="#editResource"
                                               data-whatever="${data.id}"> <i class="icon-pencil bigger-130"></i></a>
                                            <a class="red" href="#"> <i class="icon-trash bigger-130"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>

                        <div class="panel-footer">
                            <div class="row" style="line-height: initial;">
                                <div class="col-xs-5" style="padding-top: 10px;">
                                    <span id="pageInfo"></span>
                                </div>
                                <div class="col-xs-7">
                                    <div class="dataTables_paginate paging_bootstrap">
                                        <ul class="pagination" id="pagination"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <%-- 添加用户弹出层 --%>
            <div class="modal fade" id="addResource" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <form role="form" action="/resource/add" method="post" id="addResourceForm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                                <h4 class="modal-title" id="exampleModalLabel">添加资源</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">上级资源ID:</label>
                                            <input type="text" class="form-control" name="parentId" id="add_parent_id"
                                                   value="0" readonly required placeholder="上级资源ID">
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">上级资源:</label>
                                            <input type="text" class="form-control" id="add_parent_text" value="根目录"
                                                   readonly required placeholder="上级资源">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源名:</label>
                                            <input type="text" class="form-control" name="text" required
                                                   placeholder="资源名">
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">别名:</label>
                                            <input type="text" class="form-control" name="aliases" placeholder="别名">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源类型:</label>
                                            <select class="form-control" name="menuType" required>
                                                <option value="" selected>====资源类型====</option>
                                                <option value="page">菜单资源</option>
                                                <option value="element">页面元素</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源链接:</label>
                                            <input type="text" class="form-control" name="url" placeholder="资源链接">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">菜单权限:</label>
                                            <input type="text" class="form-control" name="permission"
                                                   placeholder="菜单权限">
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">序号:</label>
                                            <input type="number" class="form-control" name="sort" required
                                                   placeholder="序号">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源图标:</label>
                                            <div class="input-group" data-toggle="modal" data-target="#openSelsectIcon" data-whatever="add">
                                                <div class="col-lg-8 ">
                                                    <input type="text" name="icon" id="add_icon_text" class="form-control">
                                                </div>
                                                <div>
                                                    <a class="btn btn-white btn-bitbucket">
                                                        <i class="" id="add_icon"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">所属模块:</label>
                                            <input type="text" class="form-control" name="module" placeholder="所属模块">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">确认</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <%-- 修改资源弹出层 --%>
            <div class="modal fade" id="editResource" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2">
                <div class="modal-dialog" role="document">
                    <form role="form" action="/resource/edit" method="post" id="editResourceForm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">×</span></button>
                                <h4 class="modal-title" id="exampleModalLabe2">修改资源</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <input type="text" class="form-control" name="id" id="edit_id"
                                           style="display: none;">

                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源名:</label>
                                            <input type="text" class="form-control" name="text" id="edit_text" required
                                                   placeholder="资源名">
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">别名:</label>
                                            <input type="text" class="form-control" name="aliases" id="edit_aliases"
                                                   placeholder="别名">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源类型:</label>
                                            <select class="form-control" name="menuType" id="edit_menuType" required>
                                                <option value="" selected>====资源类型====</option>
                                                <option value="page">菜单资源</option>
                                                <option value="element">页面元素</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源链接:</label>
                                            <input type="text" class="form-control" name="url" id="edit_url"
                                                   placeholder="资源链接">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">菜单权限:</label>
                                            <input type="text" class="form-control" name="permission"
                                                   id="edit_permission" placeholder="菜单权限">
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">序号:</label>
                                            <input type="text" class="form-control" name="sort" id="edit_sort" required
                                                   placeholder="序号">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">资源图标:</label>
                                            <div class="input-group" data-toggle="modal" data-target="#openSelsectIcon" data-whatever="edit">
                                                <div class="col-lg-8 ">
                                                    <input type="text" name="icon" id="edit_icon_text" class="form-control">
                                                </div>
                                                <div>
                                                    <a class="btn btn-white btn-bitbucket">
                                                        <i class="" id="edit_icon"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label">所属模块:</label>
                                            <input type="text" class="form-control" name="module" id="edit_module"
                                                   placeholder="所属模块">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">确认</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <%-- 修改资源弹出层 --%>
            <div class="modal fade" id="openSelsectIcon" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalLabe3">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="exampleModalLabe3">资源图片列表</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-adjust')">
                                        <i class="icon-adjust bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-asterisk')">
                                        <i class="icon-asterisk bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-ban-circle')">
                                        <i class="icon-ban-circle bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-bar-chart')">
                                        <i class="icon-bar-chart bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-barcode')">
                                        <i class="icon-barcode bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('con-beaker')">
                                        <i class="icon-beaker bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-beer')">
                                        <i class="icon-beer bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-bell')">
                                        <i class="icon-bell bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-bell-alt')">
                                        <i class="icon-bell-alt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-bolt')">
                                        <i class="icon-bolt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-book')">
                                        <i class="icon-book bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-bookmark')">
                                        <i class="icon-bookmark bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-bookmark-empty')">
                                        <i class="icon-bookmark-empty bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-briefcase')">
                                        <i class="icon-briefcase bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-bullhorn')">
                                        <i class="icon-bullhorn bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-calendar')">
                                        <i class="icon-calendar bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-camera')">
                                        <i class="icon-camera bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-camera-retro')">
                                        <i class="icon-camera-retro bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-certificate')">
                                        <i class="icon-certificate bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-check')">
                                        <i class="icon-check bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-check-empty')">
                                        <i class="icon-check-empty bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-circle')">
                                        <i class="icon-circle bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-circle-blank')">
                                        <i class="icon-circle-blank bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-cloud')">
                                        <i class="icon-cloud bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-cloud-download')">
                                        <i class="icon-cloud-download bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-cloud-upload')">
                                        <i class="icon-cloud-upload bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-coffee')">
                                        <i class="icon-coffee bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-cog')">
                                        <i class="icon-cog bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-cogs')">
                                        <i class="icon-cogs bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-comment')">
                                        <i class="icon-comment bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-comment-alt')">
                                        <i class="icon-comment-alt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-comments')">
                                        <i class="icon-comments bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-comments-alt')">
                                        <i class="icon-comments-alt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-credit-card')">
                                        <i class="icon-credit-card bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-dashboard')">
                                        <i class="icon-dashboard bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-desktop')">
                                        <i class="icon-desktop bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-download')">
                                        <i class="icon-download bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-download-alt')">
                                        <i class="icon-download-alt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-edit')">
                                        <i class="icon-edit bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-envelope')">
                                        <i class="icon-envelope bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-envelope-alt')">
                                        <i class="icon-envelope-alt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-exchange')">
                                        <i class="icon-exchange bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-exclamation-sign')">
                                        <i class="icon-exclamation-sign bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-external-link')">
                                        <i class="icon-external-link bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-eye-close')">
                                        <i class="icon-eye-close bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-eye-open')">
                                        <i class="icon-eye-open bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-facetime-video')">
                                        <i class="icon-facetime-video bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-fighter-jet')">
                                        <i class="icon-fighter-jet bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-film')">
                                        <i class="icon-film bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-filter')">
                                        <i class="icon-filter bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-fire')">
                                        <i class="icon-fire bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-flag')">
                                        <i class="icon-flag bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-folder-close')">
                                        <i class="icon-folder-close bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-folder-open')">
                                        <i class="icon-folder-open bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-folder-close-alt')">
                                        <i class="icon-folder-close-alt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-folder-open-alt')">
                                        <i class="icon-folder-open-alt bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-food')">
                                        <i class="icon-food bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-gift')">
                                        <i class="icon-gift bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-glass')">
                                        <i class="icon-glass bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-globe')">
                                        <i class="icon-globe bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-group')">
                                        <i class="icon-group bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-hdd')">
                                        <i class="icon-hdd bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-headphones')">
                                        <i class="icon-headphones bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-heart')">
                                        <i class="icon-heart bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-heart-empty')">
                                        <i class="icon-heart-empty bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-home')">
                                        <i class="icon-home bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-inbox')">
                                        <i class="icon-inbox bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-info-sign')">
                                        <i class="icon-info-sign bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-key')">
                                        <i class="icon-key bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-leaf')">
                                        <i class="icon-leaf bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-laptop')">
                                        <i class="icon-laptop bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-2">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-legal')">
                                        <i class="icon-legal bigger-160"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-lemon')">
                                        <i class="icon-lemon bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-3">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-lightbulb')">
                                        <i class="icon-lightbulb bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-3">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-lock')">
                                        <i class="icon-lock bigger-160"></i>
                                    </button>
                                </div>
                                <div class="col-xs-3">
                                    <button class="btn btn-app btn-light btn-xs" onclick="selectIcon('icon-unlock')">
                                        <i class="icon-unlock bigger-160"></i>
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        verifyHasAdminPermission();
        initResourceTree();
        $("#pagination").jqPaginator({
            totalPages: 1,
            visiblePages: 7,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"><\/i>上一页<\/a><\/li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"><\/i><\/a><\/li>',
            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            onPageChange: function (pageNum, type) {
                if ('init' == type) {
                    page(pageNum, 0);
                } else {
                    var parentId = $("#page_parentId").val();
                    if (parentId) {
                        page(pageNum, parentId);
                    }
                }
            }
        });
    });
</script>
</body>
</html>